<template>
    <div class="login-page">
      <div class="login-logo">
      <img src="../assets/logo.png" alt="">
        京宝盒
      </div>
      <div class="content login-content" v-if='showStatus === "login"'>
        <div class="container mt-60" v-if='showStatus === "login"'>
            <div class="pr input-container">
                <Input required v-model="submitLogin.username" placeholder="请输入管理员账号" class='username' :maxlength="11"></Input>
            </div>
            <div class="pr input-container">
                <Input v-model="submitLogin.password" placeholder="请输入密码" type="password" @on-enter="doLogin"></Input>
            </div>
            <a class="fr text-fogot-pwd" href="javascript:;" @click='goReset'>忘记密码</a>
            <div style="clear:both;"></div>
            <a href="javascript:;" class="login-submit-btn" @click='doLogin'>登录</a>     
        </div>
      </div>
      <div class="content reset-content" v-if='showStatus === "reset"'>
          <div class="container mt-60">
            <div class="pr input-container">
                <Input v-model="submitReset.phone_number" placeholder="请输入常用手机号" class='username' :maxlength="11"></Input>
            </div>
            <div class="pr input-container">
                <Input v-model="submitReset.password" placeholder="请输入新密码" type="password"></Input>
            </div>
            <div class="pr input-container check">
              <Input v-model="resetImgCode" placeholder="请输入图形验证码" @on-enter="enterToLogin" style="width:162px;"></Input>
              <img class="check-code" :src="imgSrc" @click='getNewCheckImg'>
            </div>
            <div class="pr input-container check"> 
              <Input v-model="submitReset.phone_number_code" placeholder="请输入验证码"></Input>
              <a href="javascript:;" class="getSMS" v-show="!gotSMS" @click='getRegisterSMS("reset")'>获取验证码</a>
              <a href="javascript:;" class="getSMS" v-show="gotSMS">{{count}}s</a>
            </div>
            <div class="getSMS" v-show="gotSMS">{{count}}s</div>
            <a href="javascript:;" class="login-submit-btn mt-26 mb-20" @click='resetPassword'>确定</a>
            <a href="javascript:;" class="tips db" @click='goLogin'>登录</a>
        </div>
      </div>
      <qmodal :show='isShowQmodal' :type='qmodalType' @on-close='isShowQmodal = false'>
        <div class="default-modal-container" slot="tip">
          {{qmodalContent}}          
        </div>
      </qmodal>
    </div>
</template>
<script>
import qmodal from "./qModal.vue";
export default {
  data() {
    return {
      isShowQmodal: false,
      qmodalType: "",
      qmodalContent: "",

      showStatus: "login", //login:登录,register:注册,reset:重置密码
      rememberMe: false,
      ct: "",
      gotSMS: false,
      count: 60,
      doing: false,
      // imgSrc: 'http://192.168.1.5:9000/web/verification/img',
      imgSrc: "#",
      conversationId: 0,
      submitLogin: {
        username: "",
        password: "",
        type: 1
      },
      registerImgCode: "",
      resetImgCode: "",
      submitReset: {
        phone_number: "",
        password: "",
        phone_number_code: ""
      }
    };
  },
  created() {
    this.$Message.config({
      top: 50,
      duration: 3
    });
  },
  methods: {
    showQmodal(type, content) {
      this.isShowQmodal = true;
      this.qmodalType = type;
      this.qmodalContent = content;
    },
    enterToLogin() {
      if (this.submitLogin.imgCode.length == 5) {
        this.doLogin();
      }
    },
    //登录
    doLogin() {
      if (this.doing) {
        this.$Message.info("登录中，请耐心等待");
      } else {
        if (
          this.validCheck("phoneNumber", this.submitLogin.username) ||
          this.validCheck("password", this.submitLogin.password)
        ) {
          return false;
        }
        this.doing = true;
        this.$auth.login({
          data: this.submitLogin,
          redirect: { name: "HomePage" },
          fetchUser: true,
          success(res) {
            this.doing = false;
          },
          error(res) {
            this.doing = false;
            this.showQmodal("fail", this.getErrorMessage(res));
            this.getVerificationImg();
          }
        });
      }
    },
    //获取注册短信验证码
    getRegisterSMS(type) {
      this.requestSMS({
        image_code: this.resetImgCode,
        phone_number: this.submitReset.phone_number
      });
    },
    //请求短信验证码接口
    requestSMS(args) {
      if (
        this.validCheck("phoneNumber", args.phone_number) ||
        this.validCheck("imgCode", args.image_code)
      ) {
        return false;
      }
      this.$api
        .sendPhoneCode(args, null, this.conversationId)
        .then(res => {
          this.$Message.success("获取短信验证码成功");
          let $this = this;
          if (!$this.gotSMS) {
            $this.count = 60;
            $this.gotSMS = true;
            $this.timer = setInterval(() => {
              if ($this.count > 1) {
                $this.count--;
              } else {
                clearInterval($this.timer);
                $this.gotSMS = false;
              }
            }, 1000);
          }
        })
        .catch(res => {
          this.showQmodal("fail", this.getErrorMessage(res));
        });
    },
    //重置密码
    resetPassword() {
      if (
        this.validCheck("phoneNumber", this.submitReset.phone_number) ||
        this.validCheck("password", this.submitReset.password) ||
        this.validCheck("imgCode", this.resetImgCode) ||
        this.validCheck("phoneCode", this.submitReset.phone_number_code)
      ) {
        return false;
      }
      this.submitReset.conversation_id = this.conversationId;
      this.$api
        .findBackPassword(this.submitReset)
        .then(res => {
          this.showQmodal("success", "密码重置成功！");
          this.showStatus = "login";
        })
        .catch(res => {
          this.showQmodal("fail", this.getErrorMessage(res));
        });
    },
    getNewCheckImg() {
      this.getVerificationImg();
    },
    getErrorMessage(res) {
      let errorMessage =
        res && res.response && res.response.data
          ? res.response.data
          : "服务器异常，请重试或联系客服";
      if (res && res.status) {
        if (res.status.toString().indexOf("50") > -1) {
          errorMessage = "服务器异常，请重试或联系客服";
        }
      }
      return errorMessage;
    },
    onLogout() {
      this.$auth.logout({
        success(res) {
          this.$router.push("index");
        }
      });
    },
    goLogin() {
      this.showStatus = "login";
    },
    goRegister() {
      this.showStatus = "register";
      this.getVerificationImg();
    },
    goReset() {
      this.showStatus = "reset";
      this.getVerificationImg();
    },
    getVerificationImg() {
      this.$api.getConversationId().then(res => {
        this.conversationId = res;
        this.imgSrc =
          this.$http.defaults.baseURL +
          "/auth/verificationPicture/" +
          this.conversationId;
      });
    },

    validCheck(type, checkData) {
      if (!checkData && checkData !== 0) {
        switch (type) {
          case "phoneNumber":
            this.showQmodal("fail", "请输入常用手机号");
            break;
          case "password":
            this.showQmodal("fail", "请输入密码");
            break;
          case "imgCode":
            this.showQmodal("fail", "请输入图形验证码");
            break;
          case "phoneCode":
            this.showQmodal("fail", "请输入短信验证码");
            break;
          default:
            break;
        }
        return true;
      }
      switch (type) {
        case "phoneNumber":
          // if (checkData.length < 11) {
          //   this.showQmodal("fail", "手机号格式不正确");
          //   return true;
          // }
          break;
        case "password":
          break;
        case "imgCode":
          break;
        case "phoneCode":
          break;
        default:
          break;
      }
      return false;
    }
  },
  components: {
    qmodal
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.mt-26 {
  margin-top: 26px !important;
}
.mt-42 {
  margin-top: 42px !important;
}
.mt-60 {
  margin-top: 60px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.color-999 {
  color: #999;
}
.login-page {
  .check-code {
    cursor: pointer;
    width: 80px;
    vertical-align: bottom;
    margin-left: 10px;
  }
  a {
    color: #f5933e;
  }
  a:hover {
    color: #f5b35e;
  }
  .pr {
    position: relative !important;
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .login-submit-btn {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    background: #f5933e;
    opacity: 0.9;
    transition: background 0.3s ease;
  }
  .login-submit-btn:hover {
    color: #fff;
    background: #f5b35e;
  }
  .login-logo {
    height: 47px;
    line-height: 38px;
    color: #fff;
    img {
      height: 38px;
      vertical-align: middle;
    }
  }
  .content {
    padding: 0 20px 20px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.26);
    min-height: 410px;
  }
  .reset-content {
    min-height: 0;
    padding-bottom: 20px;
  }
  .login-content {
    min-height: 0;
    padding-bottom: 20px;
  }
  .input-container {
    margin-top: 17px;
  }
  .input-container .ivu-input {
    border: none;
    border-bottom: 1px solid #dbdbdb;
    border-radius: 0;
    box-shadow: none;
  }
  .input-container .ivu-input:focus {
    border-bottom: 1px solid #aaa;
  }
  .text-fogot-pwd {
    margin-top: 11px;
    margin-bottom: 27px;
  }
  .tips {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  .db {
    display: block;
  }
  .getSMS {
    position: absolute;
    right: 0;
    bottom: 4px;
  }
}
</style>
